<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>员工考勤信息</title>
	<script src="js/vue.js"></script>
	<link rel="stylesheet" href="element.css">
	<script src="js/element.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<style>
	*{
		padding: 0;
		margin: 0;
	}
	li{
		list-style: none;
	}
	a{
		text-decoration: none;
		display: block;
	}
</style>
<body>
	<div id="div">
		<el-menu mode="horizontal" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" :default-active="activeIndex">
			<el-menu-item index="1">首页</el-menu-item>
			<el-menu-item index="2"><a href="studentdata.html">员工管理</a></el-menu-item>
			<el-menu-item index="3"><a href="yuangongkaoqin.html">考勤管理</a></el-menu-item>
		</el-menu>
		<template>
			<el-select placeholder="请选择">
				<el-option v-for="(item,index) of value" :value="item"></el-option>
			</el-select>
		</template>
		<div class="content">
			<el-table :data="showList">
				<el-table-column label="序号" prop="id"></el-table-column>
				<el-table-column label="员工姓名" prop="name"></el-table-column>
				<el-table-column label="日期" prop="date"></el-table-column>
				<el-table-column label="上班时间" prop="checkinTime">
					<template slot-scope="data">
						{{data.row.checkinTime.substring(11)}}
					</template>
				</el-table-column>
				<el-table-column label="下班时间" prop="checkoutTime">
					<template slot-scope="data">
						<span v-if="data.row.checkoutTime">{{data.row.checkoutTime.substring(11)}}</span>
						<span v-else>暂无上班记录</span>
					</template>
				</el-table-column>
				<el-table-column label="所属部门" prop="department"></el-table-column>
				<el-table-column label="状态"></el-table-column>
			</el-table>
		</div>
	</div>
	<script>
	 var root = new Vue({
	  	el:"#div",
	  	data:{
	  		list:[],
	  		showList:[],
	  		activeIndex:"1",
	  		value:["全部","正常","异常"]
	  	},
	  	methods:{
	  		
	  	},
	  	mounted(){
	  			axios.get("http://127.0.0.1:8080/checkData").then((response)=>{
		  				this.list=response.data;
		  				this.list.forEach((item)=>{
		  					this.showList.push(item);
		  				})
		  			})
		  		}

	  })
	</script>
</body>
</html>